<template>
<view class="order-details-box" v-if="hasData">
  <view class="order-list-box">
    <view class="order-card padding-lr padding-tb bg-white text-black">
      <view class="header flex">
        <view class="cu-tag radius margin-right text-df" :class="!ifRented ? 'bg-blue' : 'bg-orange'">{{ORDER_TAG_TYPE_LIST[orderInfo.type]}}</view>
        <view class="text-lg text-cut">{{orderInfo.title}}</view>
      </view>

      <view class="content margin-top-sm">
        <view class="infos flex">
          <view class="product-img bg-gray basis-xs margin-right-sm">
            <lazy-img v-if="orderInfo.image_logo" :src="BASE_URL + orderInfo.image_logo" mode="widthFix"></lazy-img>
          </view>
          <view class="details basis-xl flex justify-between">
            <view class="price flex justify-between text-lg">
              
              <view class="text-orange text-price text-xl">{{ifRented ? orderInfo.price + '/天' : orderInfo.price}}</view>
              <!-- <view class="text-orange text-price text-xl" v-if="!ifRented">{{orderInfo.price}}</view> -->
              <!-- <view class="text-orange text-price text-xl" v-if="ifRented">{{orderInfo.pricePerDay}}/天</view> -->
              <view class="status" :class="orderInfo.status === 6 ? 'text-orange' : orderInfo.status === 7 || orderInfo.status === 8 ? 'text-red' : ''">{{ORDER_STATUS_LIST[orderInfo.status]}}</view>
            </view>

            <view class="desc flex justify-between text-gray text-sm">
              <!-- <view v-if="!ifRented">{{orderInfo.color}}&nbsp;&nbsp;|&nbsp;&nbsp;{{orderInfo.ram}}</view> -->
              <view v-if="ifRented">{{orderInfo.stages_value}}&nbsp;&nbsp;|&nbsp;&nbsp;{{orderInfo.day_value}}</view>
              <view class="repay-date" v-if="ifRented">下次还款日期: {{orderInfo.next_pay_time}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="order-details margin-top-sm border-bottom">
    <view class="cu-list menu">
      <view class="cu-item" v-for="(item, index) in productAttr" :key="index">
        <view class="content"><text class="text-gray">{{item.attr_name}}</text></view>
        <view class="action"><text>{{item.attr_value}}</text></view>
      </view>
      <!-- <view class="cu-item">
        <view class="content"><text class="text-gray">型号</text></view>
        <view class="action"><text>{{orderInfo.model}}</text></view>
      </view>
      <view class="cu-item">
        <view class="content"><text class="text-gray">颜色</text></view>
        <view class="action"><text>{{orderInfo.color}}</text></view>
      </view>
      <view class="cu-item">
        <view class="content"><text class="text-gray">内存</text></view>
        <view class="action"><text>{{orderInfo.ram}}</text></view>
      </view> -->
      <view class="cu-item" v-if="ifRented">
        <view class="content"><text class="text-gray">总租金</text></view>
        <view class="action"><text class="text-orange text-price">{{orderInfo.leaseprice}}</text></view>
      </view>
      <view class="cu-item" v-if="ifRented">
        <view class="content"><text class="text-gray">分期</text></view>
        <view class="action"><text>{{orderInfo.stages}}</text></view>
      </view>
      <view class="cu-item" v-if="ifRented" @tap="toggleInstalmentList">
        <view class="content"><text class="text-gray">每期还款</text></view>
        <view class="action"><text>{{ifShowStagesPlan ? '点击收起' : '点击展开'}}</text><text class="margin-left-sm text-black text-sm" :class="ifShowStagesPlan ? 'cuIcon-unfold' : 'cuIcon-fold'"></text></view>
      </view>
      <view class="instalment-details bg-white padding padding-top-xs" v-if="ifShowStagesPlan">
        <view class="instalment-item flex margin-top-xs text-xs" v-for="(item, index) in orderInfo.stages_plan" :key="index" :class="item.status ? '' : 'text-orange'">
          <text class="basis-xs">{{item.stages_desc}}</text>
          <text class="basis-sm">{{item.time}}</text>
          <text class="basis-xs text-right">{{item.status_desc}}</text>
          <text class="basis-xs text-price text-right">{{item.price}}</text>
        </view>
      </view>
      <view class="cu-item" v-if="ifRented">
        <view class="content"><text class="text-gray">剩余还款</text></view>
        <view class="action"><text class="text-price">{{orderInfo.surplus_price}}</text></view>
      </view>
      <view class="cu-item" v-if="ifRented">
        <view class="content"><text class="text-gray">下次还款时间</text></view>
        <view class="action"><text>{{orderInfo.next_pay_time}}</text></view>
      </view>
      <view class="cu-item" v-if="ifRented">
        <view class="content"><text class="text-gray">起租时间</text></view>
        <view class="action"><text>{{orderInfo.hire_starttime}}</text></view>
      </view>
      <view class="cu-item" v-if="ifRented">
        <view class="content"><text class="text-gray">结束时间</text></view>
        <view class="action"><text>{{orderInfo.hire_endtime}}</text></view>
      </view>
      <view class="cu-item" v-if="ifRented">
        <view class="content"><text class="text-gray">押金</text></view>
        <view class="action"><text class="text-price text-orange">{{orderInfo.deposit}}</text></view>
      </view>
      <view class="cu-item" v-if="ifRented">
        <view class="content"><text class="text-gray">折损</text></view>
        <view class="action"><text>{{orderInfo.damage}}</text></view>
      </view>
      <view class="cu-item">
        <view class="content"><text class="text-gray">订单编号</text></view>
        <view class="action"><text>{{orderInfo.serial}}</text></view>
      </view>
      <view class="cu-item">
        <view class="content"><text class="text-gray">发货单号</text></view>
        <view class="action"><text>{{orderInfo.couriernumber}}</text></view>
      </view>
      <view class="cu-item">
        <view class="content"><text class="text-gray">创建时间</text></view>
        <view class="action"><text>{{orderInfo.add_time}}</text></view>
      </view>
      <!-- <view class="cu-item">
        <view class="content"><text class="text-gray">付款时间</text></view>
        <view class="action"><text>{{orderInfo.buy_time}}</text></view>
      </view> -->
      <view class="cu-item">
        <view class="content"><text class="text-gray">发货时间</text></view>
        <view class="action"><text>{{orderInfo.courier_time}}</text></view>
      </view>
      <!-- <view class="cu-item">
        <view class="content"><text class="text-gray">付款方式</text></view>
        <view class="action"><text>{{orderInfo.pay_style_desc}}</text></view>
      </view> -->
    </view>
  </view>

  <view class="actions bg-white padding" v-if="ifRented">
    <view class="text-sm">
      <text class="text-orange" @tap="previewProtocol(1)">《租赁服务协议》</text>
      <!-- <text class="text-orange">《个人征信授权书》</text><text class="text-orange">《委托担保申请》</text> -->
    </view>

    <view class="action-btns margin-top-xs flex flex-direction">
      <button class="cu-btn margin-tb-xs round text-xl bg-orange" v-if="ifRentting" @tap="showPaymentModal">还款</button>
      <button class="cu-btn margin-tb-xs round text-xl line-orange" @tap="goback">返回</button>
      <!-- <button class="cu-btn margin-tb-xs round text-xl bg-red">提前买断</button> -->
      <!-- <button class="cu-btn margin-tb-xs round text-xl bg-blue">续租</button> -->
      <!-- <button class="cu-btn margin-tb-xs round text-xl line-orange">归还</button> -->
    </view>
  </view>

    <!-- 付款模态框 -->
  <view id="payment-modal" class="cu-modal bottom-modal" :class="ifShowPaymentModal ? 'show' : ''">
    <view class="cu-dialog bg-white padding">

      <view class="close">
        <text class="cuIcon-close text-black" @tap="hidePaymentModal"></text>
      </view>

      <view class="payment-nav margin-top">
        <scroll-view scroll-x class="bg-white nav">
          <view class="flex text-center">
            <view class="cu-item flex-sub" :class="index==curPaymentTab?'text-orange cur':''" v-for="(item,index) in PAYMENT_TYPE_LIST" :key="item.key" @tap="changePayment" :data-id="index" :data-key="item.key">
              <view class="flex align-center justify-center">
                <image :src="item.icon" class="payment-icon margin-lr" mode="aspectFit"></image>
                <text>{{item.label}}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="payment-account-content padding">
        <view class="content-box" v-if="curPaymentTab == 0">
          <view class="header text-center">
            <view class="text-gray">请将还款金额转至以下</view>
            <view class="text-xl margin-tb-xs">支付宝账户中, 并标明备注</view>
            <view class="text-gray">(备注格式: <text class="text-orange">您的姓名 + 手机号码</text>)</view>
          </view>
          <view class="content margin-top">
            <view class="payment-card ali text-center text-white padding-top shadow animation-slide-left">
              <view>支付宝账户</view>
              <view class="text-sl margin-top">{{alipay_account}}</view>
              <view class="action padding-tb" @tap="onCopy('alipay_account')">点击复制账户</view>
            </view>
          </view>
        </view>

        <view class="content-box" v-if="curPaymentTab == 1">
          <view class="header text-center">
            <view class="text-gray">请将还款金额转至以下</view>
            <view class="text-xl margin-tb-xs">微信账户中, 并标明备注</view>
            <view class="text-gray">(备注格式: <text class="text-orange">您的姓名 + 手机号码</text>)</view>
          </view>
          <view class="content margin-top">
            <view class="payment-card wechat text-center text-white padding-top shadow animation-slide-right">
              <view>微信账户</view>
              <view class="text-sl margin-top">{{wechat_account}}</view>
              <view class="action padding-tb" @tap="onCopy('wechat_account')">点击复制账户</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'order-details', // 订单详情
  data () {
    return {
      orderId: '',
      orderInfo: null,
      ifShowStagesPlan: false,
      ifShowPaymentModal: false,
      curPaymentTab: 0 // 付款导航的当前nav序号
    }
  },
  computed: {
    ...mapState([
      'BASE_URL',
      'ORDER_STATUS_LIST',
      'ORDER_TAG_TYPE_LIST',
      'PAYMENT_TYPE_LIST'
    ]),
    ...mapGetters([
      'alipay_account',
      'wechat_account'
    ]),
    hasData() {
      return this.orderInfo !== null
    },
    ifRented() {
      return this.orderInfo.type === 2
    },
    orderStatus() {
      return this.orderInfo.status
    },
    /** 租用中状态 */
    ifRentting() {
      return this.orderInfo.status === 4
    },
    /** 产品的属性(型号, 颜色, 版本等) */
    productAttr() {
      return this.orderInfo.attribute || []
    }
  },
  onLoad() {
    console.log('订单id: ', this.$Route.query.id)
    this.orderId = this.$Route.query.id
    this.getOrderDetail()
    this.$store.dispatch('getPaymentAccount')
  },
  methods: {
    getOrderDetail() {
      this.$api.getOrderDetail({order_id: this.orderId}).then(res => {
        console.log('订单详情', res)
        if (!res) return
        const resData = res.data
        this.orderInfo = resData
      })
    },
    async previewProtocol(type) {
      const url = await this.getProtocolUrl(type)
      if (!url) return
      // #ifdef APP-PLUS
      uni.downloadFile({
        url,
        success: res => {
          const filePath = res.tempFilePath
          uni.openDocument({
            filePath: filePath,
            success: res => {
              console.log('打开文档成功')
            }
          })
        }
      })
      // #endif

      // this.$Router.push({
      //   name: 'webView',
      //   params: {
      //     mode: 'protocol',
      //     type,
      //     url
      //   }
      // })
    },
    getProtocolUrl(type) {
      return new Promise(resolve => {
        const params = {
          order_id: this.orderId,
          type
        }
        this.$api.queryProtocol(params).then(res => {
          console.log('协议', res)
          if (!res) return
          const url = res.data && res.data.url
          resolve(url)
        })
      })
    },
    onCopy(key) {
      const copyData = this[key]
      this.$store.dispatch('setClipboard', copyData).then(() => {
        this.$showTipsToast('复制成功!')
      })
    },
    /** 切换显示分期详情 */
    toggleInstalmentList() {
      this.ifShowStagesPlan = !this.ifShowStagesPlan
    },
    changePayment(e) {
      this.curPaymentTab = e.currentTarget.dataset.id
      this.curPaymentKey = e.currentTarget.dataset.key
    },
    goback() {
      this.$Router.back()
    },
    showPaymentModal() {
      this.ifShowPaymentModal = true
    },
    hidePaymentModal() {
      this.ifShowPaymentModal = false
    }
  }
}
</script>

<style lang="less">
.action-btns {
  .cu-btn {
    height: 100rpx;
  }
}

/** 付款模态框 Start */
#payment-modal {
  text-align: left;

  .cu-dialog {
    min-height: 10vh;
    border-top-left-radius: 36rpx;
    border-top-right-radius: 36rpx
  }

  .close {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    font-size: 16px;
  }
  .payment-btn {
    width: 100%;
    font-size: 18px;
  }

  .payment-icon {
    width: 48rpx;
    height: 48rpx;
  }

  .payment-card {
    border-radius: 20rpx;

    &.ali {
      background-color: #108ee9;
    }
    &.wechat {
      background-color: #04BE02;
    }
  }
}

/** 付款模态框 End */
</style>
